<template>
	<view class="peersonalInfo">
		<view class="main">
			<view class="main_item">
				<view class="infoItem" v-for="(item, index) in list" @click="handleViewOrEdit(item)" :key="index"
					:style="{ borderBottom: index == list.length - 1 ? 'none' : '2rpx soild #eee' }">
					<view class="left" v-if="item.name !== 'avatar'">{{ item.title }}</view>
					<view class="avatar" v-else>
						<image class="avatar-img" :src="item.value || '/static/mine.png'" mode="">
						</image>
						<view class="avatar-realName">{{ item.realName }}</view>
					</view>
					<view class="right">
						<view :style="{ color: !item.value ? '#ccc' : '' }"
							v-if="item.name !== 'avatar' && item.name !== 'userCerts'">{{ item.value || '待完善' }}</view>
						<!-- 头像姓名 -->
						<!-- 人员证件 -->
						<view v-if="item.name == 'userCerts'" class="userCertsBox">
							<image :src="certImgStr" mode="" v-if="item.value && item.value.length"></image>
							<view style="color:#ccc" v-else>待完善</view>
						</view>
						<view class="arrow" v-if="item.isEidt"><uni-icons type="arrowright" size="16"
								color="#999"></uni-icons></view>
					</view>
				</view>
			</view>

			<view class="main">
				<view class="main_item">
					<view class="infoItem" style="border-bottom:none">
						<view class="left">隐私设置</view>
						<view class="right"
							@click="handleViewOrEdit({ name: 'showInfo', value: info.showInfo, isEdit: true, title: '隐私设置' })">
							<view>{{ info.showInfo == 1 ? '已关闭' : '已开启' }}</view>
							<view class="arrow"><uni-icons type="arrowright" size="16" color="#999"></uni-icons></view>
						</view>
					</view>
				</view>
			</view>

			<view class="main">
				<view class="main_item">
					<view class="infoItem" style="border-bottom:none;justify-content: center;color: #ff4757;"
						@click="handLogOut">
						退出登录
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
import { hanleToken } from '@/utils/utils.js';
import { detail, update } from '@/apis/personalCenter.js';
import { loginOut } from '@/apis/login.js';
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			list: [
				{
					title: '头像姓名',
					name: 'avatar',
					value: '',
					realName: '',
					isEidt: true
				},
				{
					title: '电话',
					name: 'phone',
					value: '',
					isEidt: true
				},
				{
					title: '地址',
					name: 'address',
					value: '',
					isEidt: true
				},
				{
					title: '交通工具',
					name: 'vehicleName',
					value: '',
					isEidt: true
				},
				{
					title: '人员证件',
					name: 'userCerts',
					value: '',
					isEidt: true
				},

				{
					title: '所属角色',
					name: 'roleName',
					value: ''
				},
				{
					title: '所属部门',
					name: 'deptName',
					value: ''
				},
				{
					title: '隶属公司',
					name: 'tenantName',
					value: ''
				}
			],
			info: {},
			userId: '',
			certImgStr: ''
		};
	},
	onLoad(e) {
		// this.userId = hanleToken('get', 'userData').user_id;
		this.userId = e.id;
		// this.fetchDetail();
	},
	onShow() {
		this.fetchDetail();
	},
	methods: {
		...mapActions('user', ['handleRreshToken', 'logoutFuc']),
		handLogOut() {
			// let _this = this;
			uni.showModal({
				title:'提示',
				content: '是否退出登录?',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '加载中',
						});
						uni.hideLoading();
						loginOut().then((res) => {
							uni.hideLoading();
							// 清除缓存
							uni.clearStorage();
							this.logoutFuc(); 
							setTimeout(() => { 
								uni.redirectTo({
									url: '/pages/login/index',
								});
							}, 500);
						});
					}
				},
			});
		},
		fetchDetail() {
			detail({ id: this.userId }).then(res => {
				// console.log(res,6666)
				if (res) {
					this.info = res.data;
					let arr = this.list;
					for (let i = 0; i < arr.length; i++) {
						for (let key in this.info) {
							arr[0].realName = this.info['realName'];
							if (arr[i].name === key) {
								arr[i].value = this.info[key];
								if (key == 'userCerts' && this.info[key] && this.info[key].length) {
									this.certImgStr = (this.info['userCerts'][0].certImg || '').split(',')[0];
								}

								if (key == 'deptName' || key == 'roleName') {
									console.log(this.info[key], 111);
									arr[i].value = this.info[key].replace(/,/g, ' | ');
								}
							}
						}
					}
					let { address, id, longitude, latitude, vehicle } = res.data;
					let personalInfo = { address, id, longitude, latitude, vehicle };
					// hanleToken('set', 'personalInfo',personalInfo)
					uni.setStorage({ key: 'personalInfo', data: personalInfo });
					console.log(this.list, 'eason');
				}
			});
		},
		async handleViewOrEdit(res) {
			let arr = ['头像姓名', '电话', '交通工具', '隐私设置', '人员证件', '隐私设置'];
			const { address, latitude, longitude, vehicle } = this.info;
			if (res.name === 'address') {
				uni.chooseLocation({
					success: res => {
						const { address, latitude, longitude } = res;
						this.info.address = address;
						this.info.latitude = res.latitude;
						this.info.longitude = res.longitude;
						this.handleUpdate();
					}
				});
			}
			let isEdit = arr.find(e => e == res.title);
			if (isEdit) {
				const params = {
					id: this.userId,
					address,
					latitude,
					longitude,
					vehicle,
					...res
				};
				uni.setStorageSync('personalInfo_edit_msg', JSON.stringify(params));
				uni.navigateTo({
					url: '/pageModules/personalInfo/edit',
					fail: res => {
						console.log(res);
					}
				});
			}
		},
		handleUpdate(obj) {
			const baseParam = {
				id: this.userId,
				vehicle: this.info.vehicle,
				longitude: this.info.longitude,
				latitude: this.info.latitude,
				address: this.info.address
			};
			const params = obj ? { ...baseParam, ...obj } : baseParam;
			update(params).then(res => {
				uni.showLoading({
					title: '请求中',
					icon: 'noane'
				});
				if (res) {
					// hanleToken('set','personalInfo',baseParam)
					uni.setStorage({ key: 'personalInfo', data: baseParam });
					uni.hideLoading();
					this.fetchDetail();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.peersonalInfo {
	background-color: #f3f6f8;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;

	// padding-top: 16rpx;
	.main {
		background-color: #fff;
		width: 710rpx;
		box-sizing: border-box;
		background-color: #f3f6f8;
		border-radius: 8rpx;
		margin-top: 16rpx;

		.main_item {
			padding: 0 28rpx;
			background-color: #fff;
		}

		.infoItem {
			padding: 20rpx 0rpx;
			border-bottom: 2rpx solid #eeeeee;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			align-items: center;

			.left {
				display: flex;
				flex: 1;
				color: #333;
			}

			.avatar {
				display: flex;
				align-items: center;

				&-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}

				&-realName {
					margin-left: 30rpx;
					margin-bottom: 30rpx;
				}
			}

			.right {
				display: flex;
				justify-content: flex-end;
				color: #666;
				flex-wrap: wrap;
				align-items: center;

				.arrow {
					margin-left: 16rpx;
					display: flex;
					align-items: center;
				}

				image {
					width: 72rpx;
					height: 72rpx;
				}

				.userCertsBox {
					display: flex;
				}
			}
		}
	}
}
</style>
